<template>
	<view class="main">
		<view class="info">
			<!-- 头像 -->
			<!-- padding: 57rpx 30rpx; 0 30rpx; -->
			<view class="card flex flex-ai-c flex-jc-sb" style="height: 100%;padding-top: 30rpx;">
				<view class="card-title">头像</view>
				<view class="flex flex-ai-c flex-jc-fe" style="">
					<button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="chooseImg">
						<view style="color: #333333;font-size: 28rpx;" v-if="!tempFilePaths">请上传头像</view>
						<view style="margin-bottom: 10rpx;" v-else>
							<u-image border-radius="50%" width="80rpx" height="80rpx" :src="tempFilePaths"></u-image>
						</view>
					</button>
					<u-icon name="arrow-right" color="#999999"></u-icon>
				</view>
			</view>
			<!-- 昵称  "-->
			<view class="flex flex-ai-c flex-jc-sb card">
				<view class="card-title">昵称</view>
				<view>
					<u-input v-model="userinfo.nickname" @blur="(e) => onBlur(e,'nickname')" inputAlign="right"
						:border="false" placeholder="请填写您的昵称"></u-input>
				</view>
			</view>
			<!-- 姓名  "-->
			<view class="flex flex-ai-c flex-jc-sb card">
				<view class="card-title">姓名</view>
				<view>
					<u-input v-model="userinfo.auth_name" @blur="(e) => onBlur(e,'auth_name')" inputAlign="right"
						:border="false" placeholder="请填写您的姓名"></u-input>
				</view>
			</view>

			<!-- 性别 -->
			<view class="flex flex-ai-c flex-jc-sb card">
				<view class="card-title">性别</view>
				<!-- <view>{{filterSex(userinfo.sex)}}</view> -->
				<view class="flex">
					<view class="male" :class="{'active': userinfo.sex == 1}" @click="setSex(1)">男</view>
					<view class="female" :class="{'active': userinfo.sex == 2}" @click="setSex(2)">女</view>
				</view>
			</view>
			<!-- 手机号 -->
			<view class="flex flex-ai-c flex-jc-sb card">
				<view class="card-title">手机号</view>
				<view>
					<!-- <u-input @blur="(e) => onBlur(e,'phone')" v-model="userinfo.phone" inputAlign="right" border="none"
						placeholder="请填写您的手机号"></u-input> -->
					<button @getphonenumber="formSubmit" open-type="getPhoneNumber"
						type="primary" formType="submit">
						<view class="flex flex-ai-c flex-jc-c" style="color: #333333;">{{userinfo.phone?userinfo.phone:'授权手机号'}}</view>
					</button>
				</view>
			</view>
			<!-- 旗下企业 -->
			<view class="flex flex-ai-c flex-jc-sb card">
				<view class="card-title">旗下企业</view>
				<view @click="jump(`/pages/enterprise/list?company_id=${userinfo.company_id}&id=${userinfo.id}`)"
					class="flex flex-ai-c">
					<view class="text">{{userinfo.company?userinfo.company:'请添加您的企业'}}</view>
					<u-icon name="arrow-right" color="#999999"></u-icon>
				</view>
			</view>
		</view>
		<view class="info">
			<!-- 邀请码 -->
			<view class="flex flex-ai-c flex-jc-sb card">
				<view class="card-title">邀请码</view>
				<view class="flex flex-ai-c" @click="isInvitationCode = true;invitation_code = userinfo.third_invitation_code">
					<view class="text">{{userinfo.third_invitation_code ? userinfo.third_invitation_code : '请填写您的邀请码'}}</view>
					<u-icon name="arrow-right" color="#999999"></u-icon>
				</view>
			</view>
			<!-- 座右铭 -->
			<view class="flex flex-ai-c flex-jc-sb card">
				<view class="card-title">座右铭</view>
				<view class="flex flex-ai-c"
					@click="jump(`/pages/common/editinfo?type=1&id=${userinfo.id}`,userinfo.motto)">
					<view class="text">{{userinfo.motto ? userinfo.motto : '请填写您的座右铭'}}</view>
					<u-icon name="arrow-right" color="#999999"></u-icon>
				</view>
			</view>
			<!-- 关于我 -->
			<view class="flex flex-ai-c flex-jc-sb card">
				<view class="card-title">关于我</view>
				<view class="flex flex-ai-c"
					@click="jump(`/pages/common/editinfo?type=2&id=${userinfo.id}`,userinfo.about_us)">
					<view class="text">{{userinfo.about_us ? userinfo.about_us : '完善简介提升关注度'}}</view>
					<u-icon name="arrow-right" color="#999999"></u-icon>
				</view>
			</view>
			<!-- 我能提供 -->
			<view class="flex flex-ai-c flex-jc-sb card">
				<view class="card-title">我能提供</view>
				<view class="flex flex-ai-c"
					@click="jump(`/pages/common/editinfo?type=3&id=${userinfo.id}`,userinfo.provide)">
					<view class="text">{{userinfo.provide ? userinfo.provide : '请填写您能提供的相关信息'}}</view>
					<u-icon name="arrow-right" color="#999999"></u-icon>
				</view>
			</view>
			<!-- 近期需求 -->
			<view class="flex flex-ai-c flex-jc-sb card">
				<view class="card-title">近期需求</view>
				<view class="flex flex-ai-c"
					@click="jump(`/pages/common/editinfo?type=4&id=${userinfo.id}`,userinfo.demand)">
					<view class="text">{{userinfo.demand ? userinfo.demand : '请填写您的近期需求'}}</view>
					<u-icon name="arrow-right" color="#999999"></u-icon>
				</view>
			</view>
		</view>

		<view class="info">
			<!-- 我的生日 -->
			<view class="flex flex-ai-c flex-jc-sb card">
				<view class="card-title">我的生日</view>
				<view @click="show = true" class="flex flex-ai-c">
					<view class="text">{{userinfo.birthday ? userinfo.birthday : '请选择'}}</view>
					<u-icon name="arrow-right" color="#999999"></u-icon>
				</view>
			</view>
			<!-- 我的家乡 -->
			<view class="flex flex-ai-c flex-jc-sb card">
				<view class="card-title">我的家乡</view>
				<view class="flex flex-ai-c" @click="regionChange(0)">
					<view class="text">{{userinfo.hometown_addr ? userinfo.hometown_addr : '请选择'}}</view>
					<u-icon name="arrow-right" color="#999999"></u-icon>
				</view>
			</view>
			<!-- 常驻城市 -->
			<view class="flex flex-ai-c flex-jc-sb card">
				<view class="card-title">常驻城市</view>
				<view class="flex flex-ai-c" @click="regionChange(1)">
					<view class="text">{{userinfo.addr ? userinfo.addr : '请选择'}}</view>
					<u-icon name="arrow-right" color="#999999"></u-icon>
				</view>
			</view>
			<!-- 我的奢品 -->
			<view class="flex flex-ai-c flex-jc-sb card">
				<view class="card-title">我的奢品</view>
				<view class="flex flex-ai-c" @click="jump(`/pages/common/luxury?id=${userinfo.id}`,userinfo.my_luxury)">
					<view class="text">{{userinfo.my_luxury.length ? userinfo.my_luxury.join(',') : '请选择'}}</view>
					<u-icon name="arrow-right" color="#999999"></u-icon>
				</view>
			</view>
			<!-- 兴趣爱好 -->
			<view class="flex flex-ai-c flex-jc-sb card">
				<view class="card-title">兴趣爱好</view>
				<view class="flex flex-ai-c" @click="jump(`/pages/common/hobby?id=${userinfo.id}`,userinfo.hobby)">
					<view class="text">{{userinfo.hobby.length ? userinfo.hobby.join(',') : '请选择'}}</view>
					<u-icon name="arrow-right" color="#999999"></u-icon>
				</view>
			</view>
			<!-- 关注行业 -->
			<view class="flex flex-ai-c flex-jc-sb card">
				<view class="card-title">关注行业</view>
				<view class="flex flex-ai-c" @click="jump(`/pages/common/industry?id=${userinfo.id}`,userinfo.follow)">
					<view class="text">{{userinfo.follow.length ? userinfo.follow.join(',') : '请选择'}}</view>
					<u-icon name="arrow-right" color="#999999"></u-icon>
				</view>
			</view>
			<!-- 学历背景 -->
			<view class="flex flex-ai-c flex-jc-sb card">
				<view class="card-title">学历背景</view>
				<view class="flex flex-ai-c"
					@click="jump(`/pages/common/educational/list?education_id=${userinfo.education_id}&id=${userinfo.id}`)">
					<view class="text">{{userinfo.education ? userinfo.education : '请选择'}}
					</view>
					<u-icon name="arrow-right" color="#999999"></u-icon>
				</view>
			</view>
			<!-- 朋友权限 -->
			<view class="flex flex-ai-c flex-jc-sb card">
				<view class="card-title">隐私设置</view>
				<view class="flex flex-ai-c" @click="jump(`/pages/me/auth`)">
					<view class="text">去设置</view>
					<u-icon name="arrow-right" color="#999999"></u-icon>
				</view>
			</view>
		</view>

		<!-- 相册 -->
		<view class="info">
			<view class="flex flex-ai-c flex-jc-sb card" style="height: 192rpx;padding: 0 20rpx;">
				<view class="card-title">我的相册</view>
				<view class="flex flex-jc-sb" @click="jump(`/pages/common/album`)">
					<view class="text" v-if="!userinfo.images.length">请上传</view>
					<view v-else class="flex" style="margin-right: 15rpx;">
						<image v-for="(item,i) in userinfo.images.slice(0,3)" :key="i" :src="item"
							style="width: 150rpx;height: 150rpx;margin-right: 10rpx;"></image>
					</view>
					<view class="flex flex-ai-c">
						<u-icon name="arrow-right" color="#999999"></u-icon>
					</view>
				</view>
			</view>
		</view>

		<view style="padding: 30rpx 30rpx 10rpx 30rpx;">
			<image show-menu-by-longpress src="https://lec.sclec.com/front/img/service1.png"
				style="height: 232rpx;width: 100%;"></image>
		</view>

		<view style="padding: 0rpx 0 80rpx 0">
			<view
				style="height: 100rpx;background: #fff;line-height: 100rpx;text-align: center;color: #333333;font-size: 26rpx;"
				@click="logout">退出登录</view>
		</view>
		<!-- 日期 -->
		<u-picker mode="time" v-model="show" :params="params" @confirm="confirmTime"></u-picker>
		<!-- 地区 -->
		<!-- <u-picker :params="{
			province: true,city:true,area:true
		}" mode="region" v-model="regionShow" :area-code='areaCode' @confirm="confirmRegion"></u-picker> -->
		<!-- <areaPicker :show="regionShow" /> -->
		<template v-if="regionShow">
			<areaPicker style="width:100%;height:100%" ref="dataPickerRef" :dataList="cityList" label='region_name'
				:rangeKey="'region_id'" promptText="省市区" @load="load" @close="close" @nodeClick="nodeClick" />
		</template>
		
		<u-modal v-model="isInvitationCode" show-cancel-button title="编辑邀请码" @confirm="confirmCode" @cancel="invitation_code = ''">
			<view style="padding: 30rpx;">
				<u-input inputAlign="center" v-model="invitation_code" placeholder="请填写邀请码"></u-input>
			</view>
		</u-modal>
	</view>
</template>

<script setup lang="ts">
	import {
		reactive, ref, watch
	} from 'vue'
	import user from '../../api/user'
	import common from '../../api/common'
	import {
		onShow, onLoad
	} from '@dcloudio/uni-app'
	import areaPicker from '@/components/areaPicker2.vue';
	let userinfo = ref({
		nickname: '',
		auth_name: '',
		headavatar: '',
		sex: 0,
		phone: '',
		motto: '',
		about_us: '',
		provide: '',
		demand: '',
		birthday: '',
		hometown_addr: '',
		addr: '',
		hobby: [],
		follow: [],
		my_luxury: [],
		education: '',
		images: [{}],
		company: '',//企业
		id: null,
		education_id: '',
		company_id: '',
		third_invitation_code: ''
	})
	let show = ref(false)
	let regionShow = ref(false)
	let cityList = ref([])
	let type = ref(0)	//0家乡 1常驻城市
	const params = reactive({
		year: true,
		month: true,
		day: true,
		hour: false,
		minute: false,
		second: false
	})
	let newUserinfo : any = ref({})
	let tempFilePaths = ref('')
	let dataPickerRef = ref(null)
	let isInvitationCode = ref(false) //邀请码弹窗
	let invitation_code = ref('') //邀请码
	watch(() => isInvitationCode.value,(newValue) =>{
		console.log(uni.getStorageSync('InvitationCode'),123123)
		if(!newValue) return
		if(uni.getStorageSync('InvitationCode')) {
			uni.showModal({
				title: '提示',
				content: '检测到您有分享邀请码，是否添加',
				showCancel: true,
				success: (res) => {
					if (res.confirm) {
						invitation_code.value = uni.getStorageSync('InvitationCode')
					}
				}
			})
		}
	})
	//编辑邀请码
	const confirmCode = () => {
		if(!invitation_code.value) return
		userinfo.value.third_invitation_code = invitation_code.value
		onBlur(invitation_code.value,'third_invitation_code')
	}
	const formSubmit = async (e: any) => {
		if (!e.detail.code) {
			return
		}
		const res = await user.getPhoneNumber({
			code: e.detail.code
		})
		userinfo.value.phone = res.data.phoneNumber
		if (newUserinfo.value.phone == res.data.phoneNumber) return
		/* editMemberInfo({
			phone: res.data.phoneNumber
		}, 'phone', res.data.phoneNumber) */
	}
	const getProvice = async (pid = '-1') => {
		const res = await common.getArea({
			pid: pid
		})
		cityList.value = res.data
	}
	const close = () => {
		// cityList.value = []
		regionShow.value = false
	}
	const load = async (row) => {
		const res = await common.getArea({
			pid: row.region_id
		})
		dataPickerRef.value.load(row, res.data)
	}
	const logout = () => {
		setTimeout(() => {
			uni.setStorageSync('shareId', '')
			uni.setStorageSync('InvitationCode', '')
			uni.removeStorageSync('token')
			uni.removeStorageSync('userInfo')
			uni.switchTab({
				url: '/pages/tabs/me/index'
			})
		}, 1000)
		
	}
	const nodeClick = (e) => {
		let province_code = e.value[0]
		let city_code = e.value[1] || 0
		let area_code = e.value[2] || 0

		let province_name = e.label[0]
		let city_name = e.label[1] || 0
		// let area_name = e.label[2] || 0
		if (type.value) {
			userinfo.value.addr = city_name ? city_name : province_name
			editMemberInfo({
				addr: userinfo.value.addr,
				city_id: city_code,
				provice_id: province_code,
				district_id: area_code
			})
		} else {
			userinfo.value.hometown_addr = city_name ? city_name : province_name
			editMemberInfo({
				hometown_addr: userinfo.value.hometown_addr,
				hometown_city_id: city_code,
				hometown_provice_id: province_code,
				hometown_district_id: area_code
			})
		}


	}
	const onBlur = (e : any, type : string) => {
		if (newUserinfo.value[type] == e) return
		editMemberInfo({
			[type]: e
		}, type, e)
	}
	// 选择时间
	const confirmTime = (e : any) => {
		let date = `${e.year}-${e.month}-${e.day}`
		userinfo.value.birthday = date
		if (newUserinfo.value.birthday == date) return
		editMemberInfo({
			birthday: date
		}, 'birthday', date)
	}

	const regionChange = (i : number) => {
		regionShow.value = true
		getProvice()
		type.value = i
	}
	//选择微信头像
	const chooseImg = async (e) => {
		const {
			avatarUrl
		} = e.detail
		const res = await common.upload(avatarUrl)
		userinfo.value.headavatar = res.data.url
		tempFilePaths.value = res.data.domain_url
		editMemberInfo({
			headavatar: res.data.url
		})
	}
	// 修改性别
	const setSex = (sex : number) => {
		if (userinfo.value.sex == sex) return
		userinfo.value.sex = sex
		editMemberInfo({
			sex: sex
		}, 'sex', sex)
	}
	// 跳转通用
	const jump = (url : string, item ?: any) => {
		currPageVm().$vm.value = ''
		if (item) {
			setTimeout(() => {
				uni.$emit('info', JSON.parse(JSON.stringify(item)))
			}, 200)
		}
		uni.navigateTo({
			url: url
		})
	}
	const currPageVm = () => {
		let pages = getCurrentPages();
		let currPage = pages[pages.length - 1]; // 当前页的实例
		return currPage
	}
	const editMemberInfo = (info : any, type ?: string | number, e ?: string | number) => {
		uni.showLoading()
		info.id = userinfo.value.id
		user.editMemberInfo(info).then((res) => {
			if (res.code === 200) {
				if (type) newUserinfo.value[type] = e
			} else {
				userinfo.value[type] = newUserinfo.value[type]
			}
			uni.hideLoading()
		}).catch(() => {
			uni.hideLoading()
			userinfo.value[type] = newUserinfo.value[type]
		})

	}
	const getMemberInfo = async () => {
		const res = await user.getMemberInfo()
		userinfo.value = res.data
		newUserinfo.value = JSON.parse(JSON.stringify(res.data))
		tempFilePaths.value = res.data.headavatar
	}
	onLoad(() => {
		getMemberInfo()
	})
	onShow(() => {
		let v = currPageVm().$vm.value
		if (v) {
			switch (Number(v.type)) {
				case 1:
					userinfo.value.motto = v.text
					break
				case 2:
					userinfo.value.about_us = v.text
					break
				case 3:
					userinfo.value.provide = v.text
					break
				case 4:
					userinfo.value.demand = v.text
					break
				case 5:
					userinfo.value.hobby = v.arr
					break
				case 6:
					userinfo.value.follow = v.arr
					break
				case 7:
					if (v.obj) {
						let name = `${v.obj.degree}(${v.obj.schoole})`
						console.log(name == userinfo.value.education)
						if (userinfo.value.education_id == v.obj.id && userinfo.value.education == name) return
						userinfo.value.education = name
						userinfo.value.education_id = v.obj.id
						editMemberInfo({
							education_id: userinfo.value.education_id,
							education: userinfo.value.education
						})
					}
					break
				case 8:
					if (v.obj) {
						let name = `${v.obj.company}(${v.obj.position})`
						console.log(name == userinfo.value.company)
						if (userinfo.value.company_id == v.obj.id && userinfo.value.company == name) return
						userinfo.value.company = name
						userinfo.value.company_id = v.obj.id
						editMemberInfo({
							company_id: userinfo.value.company_id,
							company: userinfo.value.company
						})
					}

					break
				case 9:
					getMemberInfo()
					break
				case 10:
					userinfo.value.my_luxury = v.arr
					break
			}
		}
	})
</script>

<style>
	page {
		background: #F8F8F8;
	}
</style>
<style lang="scss" scoped>
	.active {
		background: #333333 !important;
		color: #fff !important;
	}

	.male {
		width: 154rpx;
		height: 60rpx;
		background: #F8F8F8;
		border-radius: 100rpx 0rpx 0rpx 100rpx;
		color: #000;
		text-align: center;
		line-height: 60rpx;
	}
	.female {
		width: 154rpx;
		height: 60rpx;
		background: #F8F8F8;
		border-radius: 0 100rpx 100rpx 0;
		color: #000;
		text-align: center;
		line-height: 60rpx;
	}

	:deep(.u-input) {
		border: none !important;
	}

	:deep(.uni-input-placeholder) {
		color: #999999 !important;
	}

	button {
		font-size: 28rpx;
		font-weight: 300;
		color: #999999;
		padding: 0;
		margin-right: 8rpx;
		background: none;
	}

	// 边框样式
	button::after {
		border: 0;
	}

	.main {
		.info {
			margin: 20rpx 20rpx 0 20rpx;
		}

		.text {
			color: #999999;
			margin-right: 5rpx;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			max-width: 340rpx;
		}

		.card {
			padding: 0 30rpx;
			height: 90rpx;
			background: #fff;
			font-size: 28rpx;
			color: #666666;

			.card-title {
				color: #999999;
			}
		}

	}
</style>